<template>
    <div>
        <van-nav-bar :title="hospitalName" left-arrow @click-left="onClickLeft" />
    </div>
    <div>
        <div id="map-container"></div>
        <div class="choice">
            <van-tabs v-model:active="active" @change="ChangeTab" class="tab">
                <van-tab>
                    <template #title>
                        <img src="/public/drive.png" alt="" class="tab-img">
                        <span class="tab-title">驾车</span>
                    </template>
                    <van-cell-group inset class="cell-group">
                        起点：<input type="text" v-model="startLac" placeholder="输入起点" class="start-input" />
                    </van-cell-group>
                </van-tab>
                <van-tab>
                    <template #title>
                        <img src="/public/walk.png" alt="" class="tab-img">
                        <span class="tab-title">步行</span>
                    </template>
                    <van-cell-group inset class="cell-group">
                        起点：<input type="text" v-model="startLac" placeholder="输入起点" class="start-input" />
                    </van-cell-group>
                </van-tab>
                <van-tab>
                    <template #title>
                        <img src="/public/bike.png" alt="" class="tab-img">
                        <span class="tab-title">骑行</span>
                    </template>
                    <van-cell-group inset class="cell-group">
                        起点：<input type="text" v-model="startLac" placeholder="输入起点" class="start-input" />
                    </van-cell-group>
                </van-tab>
            </van-tabs>
            <label>终点：{{ hospitalName }}</label>
            <button @click="searchLocation">搜索</button>
        </div>
        <div id="my-panel"></div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
let hospitalResult = ref([]);
let startInput = ref([]);
let hospitalName = ref('');
let startLac = ref('');
let city = ref('');
const active = ref(0);
const onClickLeft = () => {
    router.push('/index')
};
let placeSearch;
let map = null; 
let driving;
let transfer;
let walking;
let riding;

onMounted(() => {
    city.value = route.query.city;
    hospitalName.value = route.query.hospitalName;
    console.log('--城市名---医院名--', city.value, hospitalName.value);
    // 设置高德地图安全配置
    window._AMapSecurityConfig = {
        securityJsCode: "294dd4decf5e802b95d5d475036281af",
    };
    AMapLoader.load({
        key: "3e4ac881f71ac61291d8ad95f6dcaa39", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.PlaceSearch", 'AMap.Driving', 'AMap.Transfer', 'AMap.Walking', 'AMap.Riding'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    }).then((AMap) => {
        map = new AMap.Map("map-container", {
            viewMode: "3D",// 是否为3D地图模式
            zoom: 13,// 初始化地图级别
            center: [116.397428, 39.90923], // 使用传递过来的坐标设置地图中心
            resizeEnable: true, //是否监控地图容器尺寸变化
        });
        placeSearch = new AMap.PlaceSearch({
            pageSize: 5, //单页显示结果条数
            pageIndex: 1, //页码
            city: city.value, //兴趣点城市
            citylimit: true, //是否强制限制在设置的城市内搜索
            map: map, //展现结果的地图实例
            // panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
            autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
        });

        //在回调函数中使用插件功能    //查询成功时，result 即对应匹配的 POI 信息
        placeSearch.search(hospitalName.value, (status, result) => {
            if (status === "complete" && result.poiList) {
                hospitalResult.value = result.poiList.pois;
                console.log("医院搜索结果<<<<<", hospitalResult.value);
            }
        });
        // 初始化不同导航方式的实例
        driving = new AMap.Driving({
            map: map,
            panel: "my-panel",
        });
        walking = new AMap.Walking({
            map: map,
            panel: "my-panel",

        });
        riding = new AMap.Riding({
            map: map,
            panel: "my-panel",
        });
    })
        .catch((e) => {
            console.log(e);
        });
})

const ChangeTab = (index) => {
    active.value = index
}

const searchLocation = () => {
    const newAddress = startLac.value;
    if (newAddress) {
        placeSearch.search(newAddress, (status, result) => {
            if (status === "complete" && result.poiList) {
                startInput.value = result.poiList.pois;
                console.log("搜索起点结果<<<<<", startInput.value);
                switch (active.value) {
                    case 0:  //驾车
                        if (startInput.value.length > 0 && hospitalResult.value.length > 0) {
                            const startLngLat = startInput.value[0].location;
                            const endLngLat = hospitalResult.value[0].location;
                            driving.search(startLngLat, endLngLat, (status, result) => {
                                if (status === 'complete') {
                                    console.log("驾车路线规划成功");
                                } else {
                                    console.log("驾车路线规划失败");
                                }
                            });
                        }
                        break;
                    case 1:  //步行
                        if (startInput.value.length > 0 && hospitalResult.value.length > 0) {
                            const startLngLat = startInput.value[0].location;
                            const endLngLat = hospitalResult.value[0].location;
                            walking.search(startLngLat, endLngLat, (status, result) => {
                                if (status === 'complete') {
                                    console.log("步行路线规划成功");
                                } else {
                                    console.log("步行路线规划失败")
                                }
                            });
                        }
                        break;
                    case 2:  //骑行
                        if (startInput.value.length > 0 && hospitalResult.value.length > 0) {
                            const startLngLat = startInput.value[0].location;
                            const endLngLat = hospitalResult.value[0].location;
                            riding.search(startLngLat, endLngLat, (status, result) => {
                                if (status === 'complete') {
                                    console.log("骑行路线规划成功");
                                } else {
                                    console.log("骑行路线规划失败")
                                }
                            });
                        }
                        break;
                }
            }
        });
    }
}
</script>
<style scoped>
#map-container,
#my-panel {
    width: 100%;
    height: 400px;
}

.choice {
    width: 100%;
}


.choice label {
    padding: 15px;
}

.cell-group {
    margin-top: 5%;
}

.start-input {
    width: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 10px;
}

.start-input:focus {
    border: 1px solid rgba(0, 0, 0, 0.4);
}

button {
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 10px;
    margin: 2% 5%;
    width: 80px;
}

.route-info {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}
</style>
